<template>
  <el-container>
    <el-row style="margin: 1% auto;font-size:20px">设置最大时间</el-row>
    <br />
    <el-card style="margin-top:10px">

      <el-table v-loading="tableLoding" :data="tableData.data" style="width: 100%">
        <el-table-column prop="state" label="到场状态" :formatter="stateChangeData"></el-table-column>
        <el-table-column prop="maxTime" label="最大天数" align="center"></el-table-column>
        <el-table-column prop="operation" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="primary">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <el-row style="margin: 1% auto;font-size:20px">设置警告时间</el-row>
    <el-card style="margin-top:10px">

      <el-table v-loading="tableLoding" :data="tableData1.data" style="width: 100%">
        <el-table-column prop="name" label="提示类别"></el-table-column>
        <el-table-column prop="warningTime" label="提示天数" align="center"></el-table-column>
        <el-table-column prop="operation" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleWarningEdit(scope.$index, scope.row)" type="primary">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
    <el-footer></el-footer>

    <el-dialog title="修改节点时间" :visible.sync="setMaxTimeState" center :append-to-body="true" :lock-scroll="false"
      width="35%">
      <el-form :rules="setMaxTimeRules" :model="setMaxTimeDetail" ref="setMaxTimeDetail" style="font-size:20px;"
        label-width="160px">
        <el-form-item label="所在节点">
          <el-input v-model="stateName" disabled></el-input>
        </el-form-item>

        <el-form-item label="最大时间（天）">
          <el-input v-model="setMaxTimeDetail.maxTime"></el-input>
        </el-form-item>

        <el-form-item style="margin-left:1px">
          <el-button @click="putSetMaxTimeSave(setMaxTimeDetail)" type="primary">保存</el-button>
          <el-button @click="putSetMaxTimeCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="修改警告时间" :visible.sync="setWarningTimeState" center :append-to-body="true" :lock-scroll="false"
      width="35%">
      <el-form :rules="setMaxTimeRules" :model="setMaxTimeDetail" ref="setMaxTimeDetail" style="font-size:20px;"
        label-width="160px">
        <el-form-item label="所在节点">
          <el-input v-model="setMaxTimeDetail.name" disabled></el-input>
        </el-form-item>

        <el-form-item label="警告时间（天）">
          <el-input v-model="setMaxTimeDetail.warningTime"></el-input>
        </el-form-item>

        <el-form-item style="margin-left:1px">
          <el-button @click="putSetWarningTimeSave(setMaxTimeDetail)" type="primary">保存</el-button>
          <el-button @click="putSetMaxTimeCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
  import {
    updateMaxTimeByState,
    removeMaxTimePro,
    getMaxTimeListPageApi,
    getWarningTimeListPageApi,
    updateWarningTimeByName
  } from "@/api/maxTimeApi";
  export default {
    data() {
      return {
        time: "",
        stateName: "",
        setMaxTimeState: false,
        setWarningTimeState: false,
        setExpireTimeState: false,
        tableData: {
          //表格data
          data: [{
            max_time: "",
            state: "",
            warning_time: "",
            expire_time: ""
          }],
          currentPage: 1,
          pageSize: 5,
          total: 0
        },
        tableData1: {
          //警告表格data
          data: [{
            name: "",
            warning_time: "",
          }],
          currentPage: 1,
          pageSize: 5,
          total: 0
        },

        tableLoding: false, //表格加载
        setMaxTimeDetail: {
          id: "",
          name: "",
          maxTime: "",
          state: "",
          warningTime: "",
          expireTime: ""
        },
        setMaxTimeRules: {
          maxTime: [{
            required: true,
            message: "请输入最大时间",
            trigger: "blur"
          }]
        }
      };
    },
    created: function () {
      this.getMaxTimeList();
      this.getWarningTimeList();
    },
    methods: {
      // 数据控制
      getMaxTimeList() {
        this.tableLoding = true;
        getMaxTimeListPageApi()
          .then(response => {
            this.tableData.data = response.data.data;
          })
          .catch(error => {
            this.$message({
              showClose: true,
              message: error,
              type: "error"
            });
          });
        this.tableLoding = false;
      },
      //提示天数控制
      getWarningTimeList() {
        this.tableLoding = true;
        getWarningTimeListPageApi()
          .then(res => {
            this.tableData1.data = res.data.data;
          })
          .catch(error => {
            this.$message({
              showClose: true,
              message: error,
              type: "error"
            });
          });
        this.tableLoding = false;
      },
      stateChangeData: function (row, column) {
        return row.state == "2" ? "初审" : row.state == "3" ? "规划许可" : row.state == "4" ? "施工管理" : row.state == "5" ?
          "竣工验收" : "未知";
      },

      //编辑窗口
      handleEdit(index, row) {
        this.setMaxTimeState = true;
        this.setMaxTimeDetail.id = row.id;
        this.setMaxTimeDetail.state = row.state;
        this.setMaxTimeDetail.maxTime = row.maxTime;
        if (this.setMaxTimeDetail.state == 2) {
          this.stateName = "初审";
        }
        if (this.setMaxTimeDetail.state == 3) {
          this.stateName = "规划许可";
        }

        if (this.setMaxTimeDetail.state == 4) {
          this.stateName = "施工管理";
        }

        if (this.setMaxTimeDetail.state == 5) {
          this.stateName = "竣工验收";
        }
      },
      //编辑警告时间
      handleWarningEdit(index, row) {
        this.setWarningTimeState = true;
        this.setMaxTimeDetail.id = row.id;
        this.setMaxTimeDetail.name = row.name;
        this.setMaxTimeDetail.warningTime = row.warningTime;
      },

      //修改天数 updateMaxTimeByState addMaxTimePro
      putSetMaxTimeSave(setMaxTimeDetail) {
        if (setMaxTimeDetail.maxTime) {
          updateMaxTimeByState(setMaxTimeDetail)
            .then(response => {
              this.getMaxTimeList();
              this.$message.success(response.data.respondMessage);
            })
            .catch(error => {
              this.$message({
                showClose: true,
                message: error.data.respondMessage,
                type: "error"
              });
            });
        } else {
          this.$message.error("请正确输入数据！");
          return;
        }
        this.putSetMaxTimeCancel();
        this.setMaxTimeState = false;
      },
      putSetWarningTimeSave(setMaxTimeDetail) {
        if (setMaxTimeDetail.warningTime) {
          updateWarningTimeByName(setMaxTimeDetail)
            .then(res => {
              this.getWarningTimeList();
              this.$message.success("修改成功");
            })
        } else {
          this.$message.error("请正确输入数据！");
          return;
        }
        this.putSetMaxTimeCancel();
        this.setWarningTimeState = false;
      },

      //取消窗口
      putSetMaxTimeCancel() {
        // this.setMaxTimeDetail = {
        //   id:"",
        //   name: "",
        //   state: ""
        // };
        this.setMaxTimeState = false;
        this.setWarningTimeState = false;
      }
    }
  };
</script>

<style>
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #70b3ff87 !important;
  }
</style>